<template>
	<view class="app-tabbar-container">
		<u-tabbar
			:value="value"
			@change="jumpRoute"
			:fixed="true"
			activeColor="#666"
			inactiveColor="#ccc"
			:placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item v-for="(tab,index) in tabbarList" :key="index" :text="tab.label" :name="tab.name">
				<image class="tabbar-icon active-icon"
					slot="active-icon"
					:src="tab.selectedIconPath"
				></image>
				<image class="tabbar-icon"
					slot="inactive-icon"
					:src="tab.iconPath"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import tabbar from '@/static/json/tabbar.json'
	import userConfig from '@/static/json/userConfig.json'
	import {mapGetters} from 'vuex'
	export default {
		props: {
			value: String
		},
		computed: {
			...mapGetters('user', [
				'roleKey'
			]),
			tabbarList(){
				let _self = this, idx = -1, tabList = []
				idx = userConfig.findIndex(item => item.roleKey == _self.roleKey)
				if(idx == -1) return tabList
				tabList = tabbar.filter(tab => userConfig[idx]['tabbar'].includes(tab.label))
				if(tabList[0]){
					_self.$emit('input', tabList[0]['name'])
					uni.setNavigationBarTitle({
						title: `${tabList[0]['label']}`
					})
				}
				return tabList
			},
		},
		data() {
			return {
				routeProp:{}
			};
		},
		mounted(){
			let _self = this
			uni.getStorage({
				key: 'RH-Role-KEY',
				success: (res) => {
					console.log(res)
				}
			})
		},
		methods: {
			jumpRoute(name){
				let _self = this
				if(name == _self.value) return
				let route = _self.tabbarList.find(route => route.name == name)
				_self.$emit('input', name)
				_self.$emit('tabbar-change', name)
				uni.setNavigationBarTitle({
					title: `${route['label']}`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.tabbar-icon{
	height: 48rpx;
	width: 48rpx;
}
</style>
